<template>
  <div class="zui-attachment" :class="{ disabled }">
    <ul v-if="attachments && attachments.length" class="attachments">
      <li v-for="(item, idx) in attachments" :key="idx" class="attachment clickable" @click="onAttachmentClick(item)">
        <span class="name">{{ item.name }}</span>
        <i
          v-if="!readonly && editActions.includes('remove')"
          class="remove iconfont-zui icon-zui-x clickable"
          @click.stop="!disabled && onRemoveAttachment(idx)"
        ></i>
      </li>
    </ul>
    <div
      v-if="!readonly && (attachments && attachments.length) < max && editActions.includes('add')"
      class="add-btn"
      :class="[disabled]"
    >
      <div class="icon iconfont-zui icon-zui-plus"></div>
      <input class="add" type="file" accept="*/*" @change="onFileChange" ref="fileDom" :disabled="disabled" />
    </div>
    <div v-if="readonly && (!attachments || !attachments.length)" class="empty">未上传</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const emit = defineEmits(['update:modelValue', 'fileSelect', 'attachmentClick'])

const props = defineProps({
  modelValue: {
    type: Array as () => Array<any>,
    default: () => []
  },
  max: { type: Number, default: 3 },
  /**
   * 可执行操作 add：增加，remove：移除
   */
  editActions: { type: Array, default: ['add', 'remove'] },
  disabled: Boolean,
  readonly: Boolean
})

const attachments = ref(props.modelValue)
watch(attachments, (val) => {
  emit('update:modelValue', val)
})

watch(
  () => props.modelValue,
  (val) => {
    attachments.value = val
  },
  { immediate: true }
)

const fileDom = ref()

function onFileChange() {
  const file = fileDom.value.files[0]
  emit('fileSelect', file)
  fileDom.value.value = ''
}

function onRemoveAttachment(idx) {
  attachments.value.splice(idx, 1)
}

function onAttachmentClick(attachment) {
  emit('attachmentClick', attachment)
}
</script>

<style lang="scss" scoped>
.zui-attachment {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  &.disabled {
    opacity: 0.5;
  }
  .attachments {
    &:not(:last-child) {
      margin-bottom: 8px;
    }
    .attachment {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: var(--zui-size-border-radius-small);
      padding: 6px 16px;
      line-height: var(--zui-size-line-height-regular);
      background-color: var(--zui-color-fill-light);
      color: var(--zui-color-primary);

      &:not(:first-child) {
        margin-top: 8px;
      }

      .name {
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .remove {
        flex: none;
        margin-left: 16px;
        color: var(--zui-color-text-secondary);
        font-size: var(--size-text-regular);
      }
    }
  }
  .add-btn {
    position: relative;
    overflow: hidden;
    height: 32px;
    width: 100%;
    border: 1px solid rgba($color: #e4e7ed, $alpha: 0.61);
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: var(--zui-box-shadow);
    .icon:not(.disabled):active {
      background: var(--zui-color-gray-light);
    }
    .icon {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      line-height: 30px;
      text-align: center;
      color: var(--zui-color-text-secondary);
      font-size: var(--zui-size-text-regular);
    }
    .add {
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }
  .empty {
    color: var(--zui-color-text-secondary);
    line-height: var(--zui-size-line-height-regular);
    padding: 6px 12px;
    background-color: var(--zui-color-fill-light);
  }
}
</style>
